import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Dimensions, Platform } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { useNavigation } from '@react-navigation/native';
import ChatInterface from '../src/components/ChatInterface';

const MAX_WIDTH = 480;
const screenWidth = Dimensions.get('window').width;
const contentWidth = screenWidth > MAX_WIDTH ? MAX_WIDTH : screenWidth;

// 常见问题列表
const faqList = [
  { question: '如何找回账号密码？', answer: '您可以通过绑定的手机号或邮箱进行密码重置，或联系客服提供账号信息和身份证明，我们会协助您找回账号。' },
  { question: '充值没到账怎么办？', answer: '请提供您的充值订单号和账号信息，我们会为您核实充值状态并处理。一般情况下，充值会在15分钟内到账。' },
  { question: '如何申请退款？', answer: '根据平台规定，您可以在购买后24小时内申请退款，请提供订单号和退款原因，我们会尽快处理您的退款申请。' },
  { question: '游戏账号被盗怎么办？', answer: '请立即修改密码并联系客服，提供账号信息和相关证明，我们会协助您处理账号安全问题并追回损失。' },
  { question: '如何举报违规行为？', answer: '您可以通过游戏内举报功能或联系客服提供违规证据，我们会认真核实并严肃处理违规行为，维护游戏环境。' },
  { question: '游戏内交易安全保障？', answer: '平台提供担保交易服务，交易双方确认后才会完成交易。如遇欺诈行为，请保留证据并联系客服处理。' },
];

export default function CustomerService() {
  const navigation = useNavigation();
  const [showChat, setShowChat] = useState(false);
  const [initialQuestion, setInitialQuestion] = useState(null);
  
  // 处理FAQ项点击，设置初始问题并打开聊天界面
  const handleFaqItemClick = (question) => {
    setInitialQuestion(question);
    setShowChat(true);
  };
  
  // 关闭聊天界面
  const handleCloseChat = () => {
    setShowChat(false);
    setInitialQuestion(null);
  };
  
  return (
    <View style={styles.container}>
      {/* 顶部导航栏 */}
      <View style={styles.header}>
        <TouchableOpacity style={styles.backButton} onPress={() => navigation.goBack()}>
          <Ionicons name="chevron-back" size={24} color="#666" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>官方客服</Text>
      </View>
      
      {showChat ? (
        <ChatInterface onClose={handleCloseChat} initialQuestion={initialQuestion} />
      ) : (
        <>
          <ScrollView style={styles.content}>
            <View style={[styles.contentInner, { width: contentWidth }]}>
              {/* 快捷服务区域 */}
              <View style={styles.quickServiceContainer}>
                <TouchableOpacity style={styles.quickServiceItem}>
                  <View style={styles.quickServiceIcon}>
                    <Ionicons name="cash-outline" size={24} color="#d0021b" />
                  </View>
                  <Text style={styles.quickServiceText}>我要提现</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.quickServiceItem}>
                  <View style={styles.quickServiceIcon}>
                    <Ionicons name="cube-outline" size={24} color="#d0021b" />
                  </View>
                  <Text style={styles.quickServiceText}>我要发货</Text>
                </TouchableOpacity>
              </View>
              
              {/* 常见问题区域 */}
              <View style={styles.faqContainer}>
                <View style={styles.faqHeader}>
                  <Text style={styles.faqTitle}>常见问题</Text>
                  <TouchableOpacity>
                    <Text style={styles.viewMoreText}>查看所有</Text>
                  </TouchableOpacity>
                </View>
                
                {/* 问题列表 */}
                {faqList.map((item, index) => (
                  <TouchableOpacity 
                    key={index} 
                    style={styles.faqItem}
                    onPress={() => handleFaqItemClick(item.question)}
                  >
                    <Text style={styles.faqQuestion}>{item.question}</Text>
                    <Ionicons name="chevron-forward" size={20} color="#999" />
                  </TouchableOpacity>
                ))}
              </View>
            </View>
          </ScrollView>
          
          {/* 底部在线客服按钮 */}
          <TouchableOpacity 
            style={styles.onlineServiceButton}
            onPress={() => setShowChat(true)}
          >
            <Ionicons name="chatbubble-ellipses" size={20} color="#d0021b" />
            <Text style={styles.onlineServiceText}>在线客服</Text>
          </TouchableOpacity>
        </>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: Platform.OS === 'ios' ? 88 : 56,
    paddingTop: Platform.OS === 'ios' ? 44 : 0,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  backButton: {
    position: 'absolute',
    left: 10,
    bottom: 12,
  },
  headerTitle: {
    fontSize: 17,
    fontWeight: '500',
    color: '#333',
  },
  content: {
    flex: 1,
  },
  contentInner: {
    alignSelf: 'center',
  },
  quickServiceContainer: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    padding: 15,
    marginTop: 10,
    borderRadius: 8,
    marginHorizontal: 10,
  },
  quickServiceItem: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  quickServiceIcon: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: 'rgba(208, 2, 27, 0.1)',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 8,
  },
  quickServiceText: {
    fontSize: 14,
    color: '#333',
  },
  faqContainer: {
    backgroundColor: '#fff',
    marginTop: 10,
    borderRadius: 8,
    marginHorizontal: 10,
    paddingVertical: 10,
    marginBottom: 80, // 为底部按钮留出空间
  },
  faqHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 15,
    paddingVertical: 10,
  },
  faqTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
  },
  viewMoreText: {
    fontSize: 14,
    color: '#999',
  },
  faqItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 15,
    paddingVertical: 12,
    borderTopWidth: 1,
    borderTopColor: '#f0f0f0',
  },
  faqQuestion: {
    fontSize: 14,
    color: '#333',
    flex: 1,
  },
  onlineServiceButton: {
    position: 'absolute',
    bottom: 20,
    left: '50%',
    transform: [{ translateX: -80 }],
    backgroundColor: '#fff',
    borderRadius: 20,
    paddingVertical: 10,
    paddingHorizontal: 20,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: 160,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  onlineServiceText: {
    fontSize: 14,
    color: '#d0021b',
    marginLeft: 5,
    fontWeight: '500',
  },
});